import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { action } from '@storybook/addon-actions';
import { ViewPort, Centered, Positioned } from "../../";
import { ResizeType } from "../../../core-types";
import { useCurrentSpace } from "../../../core-react";
import { green, description } from "../Utils";
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";

<CommonHeader />

<Meta title="Components/Positioned/Top, right, bottom, left specified" component={Positioned} />

## Positioned

Absolutely positioned space within it's parent with top / left / right / bottom specified.

<Canvas>
	<Story name="Non-resizable">
		<ViewPort>
			<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true}>
				{description("Positioned")}
			</Positioned>
		</ViewPort>
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (all sides)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (left)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (top)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (right)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (bottom)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (top-left)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.TopLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (top-right)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.TopRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (bottom-left)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.BottomLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Resize handles (bottom-right)">
		{() => {
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					{description("Positioned")}
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Drag handle">
		{() => {
			const DragHandle = () => {
				const space = useCurrentSpace();
				return (
					<Centered>
						<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
							Drag handle
						</button>
					</Centered>
				)
			}
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true}>
					<DragHandle />
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="Drag handle and resizable">
		{() => {
			const DragHandle = () => {
				const space = useCurrentSpace();
				return (
					<Centered>
						<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
							Drag handle
						</button>
					</Centered>
				)
			}
			return <ViewPort>
				<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
					<DragHandle />
				</Positioned>
			</ViewPort>
		}}
	</Story>
</Canvas>